<template>
  <div class="material-print" ref="print">
    <h2>{{title}}</h2>
    <table cellspacing="0" cellpadding="0">
      <thead>
        <tr>
          <th>序号</th>
          <th>料品大类</th>
          <th>料品分类</th>
          <th>物料编码</th>
          <th>物料名称</th>
          <th>采购数量</th>
          <th>已订数量</th>
          <th>未订数量</th>
          <th>到货数量</th>
          <th>入库数量</th>
        </tr>
      </thead>
      <tbody v-if="printData.length>0">
        <tr v-for="(item,index) in printData" :key="index">
          <td>{{item.number}}</td>
          <td>{{item.invSortRoot}}</td>
          <td>{{item.invSortId}}</td>
          <td>{{item.invCode}}</td>
          <td>{{item.invName}} {{item.invAttribute}}</td>
          <td>{{item.quantity}}</td>
          <td>{{item.wiQuantity}}</td>
          <td>{{item.notQuantity}}</td>
          <td>{{item.sumQuantity }}</td>
          <td>{{item.sumWiQuantity }}</td>
        </tr>
      </tbody>
    </table>
  </div>

</template>

<script>
  export default {
    data() {
      return {

      }
    },
    mounted() {},
    props: {
      printData: {
        type: Array,
        default () {
          return []
        }
      },
      title: {
        type: String,
        default () {
          return ""
        }
      },

    }
  }
</script>

<style lang="scss" scoped="scoped">
  @media print {
    .material-print {
      display: block !important;
    }
  }

  .material-print {
    display: none;

    h2 {
      text-align: center;
      color: #515a6e;
    }

    table {
      width: 100%;
      margin-bottom: 20px;
      border-left: 1px solid #ccc;

      th {
        text-align: center;
        font-size: 14px;
        padding: 5px;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        border-top: 1px solid #ccc;
      }

      td {
        text-align: center;
        font-size: 13px;
        color: #606266;
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 5px;
      }
    }
  }
</style>
